<template>
  <div class="film-view">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
      <van-swipe :autoplay="3000" indicator-color="#fff">
        <van-swipe-item v-for="(image, index) in advertisingData" :key="index">
          <img v-lazy="image.res_url[0]" />
        </van-swipe-item>
      </van-swipe>

      <div class="nav">
        <ul>
          <li v-for="(t,index) in topTagLists" :key="index" :class="[!t.image ? 'empty' : '']">
            <div class="cover-layer"></div>
            <img :src="t.image" />
            <div class="name">#{{t.name}}</div>
            <div class="joined-count">{{t.joinedCount}}参加</div>
          </li>
        </ul>
        <i></i>
      </div>

      <div class="content">
        <keep-alive>
          <masonry-view :DataArr="lifeDataArr" :switchSelected="switchSelected" />
        </keep-alive>

        <wd-infinite-load
          ref="loadmore"
          @loadmore="loadmore"
          :offset="10"
          :immediate-check="false"
          :loading="loading"
        ></wd-infinite-load>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { get_recommended_data, get_advertising } from "@/apis/http";
import MasonryView from "@/components/HomeComponents/FoundComponents/MasonryView.vue";

export default {
  name: "FilmView", //影视页
  components: { MasonryView },
  data() {
    return {
      time: 5,
      loading: false,
      showLoading: true,
      isLoading: false,
      lifeDataArr: [],
      topTagLists: [],
      advertisingData: []
    };
  },
  mounted() {
    this.getNewRecommendedFilm();
    this.getAdvertising();
  },
  methods: {
    //第二步  在自定义方法中调用get_users方法，通过async和awit搭配直接获取到数据
    async getNewRecommendedFilm() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_recommended_data({
        domainId: "1442207751226"
      });
      // console.log(res); // 这样就获取到了请求的所有数据！
      this.lifeDataArr = res.list;
      this.topTagLists = res.topTagLists;
      this.showLoading = false;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getRecommendedFilm() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let { data: res } = await get_recommended_data({
        domainId: "1442207751226"
      });
      //   console.log(res); // 这样就获取到了请求的所有数据！
      this.lifeDataArr.push(...res.list);
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    async getAdvertising() {
      //通过路由传参的形式，请求数据！！！ {data:res}直接结构赋值出来data给res
      let data = await get_advertising({
        category: "EXPLOREBANNER",
        extJson: '{"domainId":"1442207751226"}'
      });
      // console.log(data); // 这样就获取到了请求的所有数据！
      this.advertisingData = data[0].ads;
      //后续就可以通过赋值的方式，在页面上渲染数据。
    },

    onRefresh() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.isLoading = false;
          this.getNewRecommendedFilm();
        });
      }, 1000);
    },

    loadmore() {
      this.loading = true;

      if (this.time) {
        setTimeout(() => {
          this.getRecommendedFilm();
          this.loading = false;
          // 模拟请求，请求3次，3次结束后设置加载结束
          this.time--;
        }, 1000);
      } else {
        this.$refs.loadmore.loadEnd();
      }
    },

    switchSelected(id) {
      this.$nextTick(() => {
        this.lifeDataArr.forEach(r => {
          if (r.itemId === id) {
            if (r.postData.postCount.viewCount == 1) {
              r.postData.postCount.viewCount = 0;
              r.postData.postCount.favoriteCount -= 1;
            } else {
              r.postData.postCount.viewCount = 1;
              r.postData.postCount.favoriteCount += 1;
            }
          }
        });

        this.$store.commit("toggleMyLike", id);
        console.log(this.$store.state.myLike);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.film-view {
  width: 100vw;
  min-height: 100vh;
  margin-bottom: 55px;

  .nav {
    margin: 10px 0;
    padding: 0 10px;
    position: relative;
    ul {
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
      display: flex;
      align-items: center;

      li {
        width: 95px;
        height: 60px;
        margin: 0 5px;
        border-radius: 15px;
        display: inline-block;
        position: relative;

        .cover-layer {
          width: 100%;
          height: 100%;
          position: absolute;
          bottom: 0px;
          background-color: rgba(0, 0, 0, 0.4);
          border-radius: 15px;
          z-index: 49;
        }

        img {
          width: 95px;
          height: 60px;
          object-fit: cover;
          filter: blur(1px);
          border-radius: 15px;
        }

        .name,
        .joined-count {
          color: #fff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 50;
        }

        .name {
          font-size: 12px;
          top: 35%;
        }

        .joined-count {
          font-size: 12px;
          top: 65%;
        }
      }

      .empty {
        background-color: #8f8f8f;
      }
    }

    i {
      width: 50vw;
      height: 20px;
      display: block;
      background-image: url("~@/assets/images/home/xSU.png");
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      position: absolute;
      bottom: -25px;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  img {
    width: 100%;
    height: 100%;
  }

  .content {
    width: 98vw;
    margin: 0px auto;
    margin-top: 10px;
    margin-bottom: 55px;
  }
}
</style>